(function($){
	$.extend({
		chart: null,
		// chart adapter
		chartDHTMLXAdapter: function(map) {
			var adapted = [];
			$.each(map, function(index, value){
				var name =  getCategoryName(index)
				adapted.push({
					value: value,
					label: name,
				});
			});
			return adapted;
		},
		highChartsAdapter: function(map) {
			var adapted = [];
			var total = 0;
			$.each(map, function(index, value){
				var name = getCategoryName(index);
				total += value;
				adapted.push([name, value]);
			});
			return {
				data: adapted,
				total: total
			};
		},
		showHighCharts: function(data) {
			$.chart = new Highcharts.Chart({
				chart: {
					renderTo: 'chartPlaceHolder',
					plotBackgroundColor: null,
					plotBorderWidth: null,
					plotShadow: false
				},
				title: {
					text: 'Total: ' + data.total + ' AED'
				},
				tooltip: {
					formatter: function() {
						return '<b>'+ this.point.name +'</b>: '+ this.y +' AED';
					}
				},
				plotOptions: {
					pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						dataLabels: {
							enabled: true,
							color: '#000000',
							connectorColor: '#000000',
							formatter: function() {
								return '<b>'+ this.point.name +'</b>: '+ Math.round(this.y / data.total * 100) +' %';
							}
						}
					}
				},
			    series: [{
					type: 'pie',
					name: 'Browser share',
					data: data.data
				}]
			});
		},
		// chart render
		showDHTMLXChart: function(data) {
			// TODO: handle more data
			if($.chart) {
				$.chart.clearAll();
				$('#chartPlaceHolder').children().remove();
			}
			$.chart =  new dhtmlXChart({
				view:"pie",
				container:"chartPlaceHolder",
				value:"#value#",
				/*color:"#color#", TODO: later */
				label:"#label#",
				pieInnerText:"<b>#label#</b>",
				gradient:true,
				legend:"#label#",
				tooltip:{
					template:"#value#"
				},
			});
			$.chart.parse(data,"json");
		}
	});
})(jQuery);